<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>5</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				
			}
			.loading{
					width: 100%;
					height: 100%;
					background: #fff;
					position: fixed;
					left: 0;
					top: 0;
			}
			.loading .pic{
				width: 100px;
				height: 100px;
				/*border: 1px solid red;*/
				position: absolute;
				left: 45%;
				top: 45%;
				font-size: 30px;
				text-align: center;
				line-height: 100px;
			}
			span{
				display: block;
				width: 80px;
				height: 80px;
				position: absolute;
				left: 10px;
				top: 10px;
				/*background: pink;*/
				border-radius: 50%;
				box-shadow: 0 3px 0 #666;
				animation: rotate 1s infinite linear;
			}
			@keyframes rotate{
				0%{
					transform:rotate(0deg);
				}
				100%{
					transform:rotate(360deg);
				}
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				//获取所有img
				var img = $("img");
				//定时器
				var num = 0;
				//循环所有img
				img.each(function(i){
					console.log(i);
					//循环每个img都创建一个new Image
					var oImg = new Image();
					//图像加载完之后发生
					oImg.onload = function(){
						oImg.onload = null;
						num++;
						$(".loading b").html(parseInt(num/$("img").length*100)+"%");
						if(num >= i){
							$(".loading").fadeOut();
						}
					}
					oImg.src = img[i].src;
					
				})
			})
		</script>
	</head>
	<body>
		<div class="loading">
			<div class="pic">
				<span></span>
				<b>0%</b>
			</div>
		</div>
		<img src="http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg"/>
		<img src="http://pic2.ooopic.com/11/98/31/31bOOOPIC12_1024.jpg"/>
		<img src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg"/>
		<img src="http://b.hiphotos.baidu.com/image/pic/item/5bafa40f4bfbfbed9215b39772f0f736aec31f8d.jpg"/>
	
	</body>
</html>
